<template>
  <div ref="target">饼状图</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

let myChart = null;
let target = ref(null);

function renderChart() {
  const options = {
    // 饼状图没有xAxis和yAxis
    title: {
      text: '饼状图数据',
      left: 'center',
    },
    tooltip: {
      trigger: 'item',
    },
    legend: {
      orient: 'horizontal',
      left: 'center',
      // icon: 'roundRect',
      bottom: 10,
      backgroundColor: 'red',
      borderRadius: 20, // 整个图例的圆角，不是单项的圆角
      itemStyle: {
        borderCap: 'round',
        // shadowColor: 'rgba(0, 0, 0, 0.5)',
        // shadowBlur: 10,
        // opacity: 0,
      },
      lineStyle: {
        color: 'red',
      },
      formatter: '-{name}-',
    },
    series: [
      {
        type: 'pie',
        radius: ['45%', '50%'],
        data: [
          { name: '华北', value: 63 },
          { name: '东北', value: 54 },
          { name: '华东', value: 75 },
          { name: '中南', value: 83 },
          { name: '西南', value: 93 },
          { name: '西北', value: 73 },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 3,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.2)',
          },
        },
      },
      {
        type: 'pie',
        radius: ['35%', '40%'],
        data: [
          { name: '华北', value: 63 },
          { name: '东北', value: 54 },
          { name: '华东', value: 75 },
          { name: '中南', value: 83 },
          { name: '西南', value: 93 },
          { name: '西北', value: 73 },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 3,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.2)',
          },
        },
      },
    ],
  };

  myChart.setOption(options);
}

onMounted(() => {
  myChart = echarts.init(target.value);
  renderChart();
});
</script>
<style lang="scss" scoped></style>
